﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body,div{margin:0;padding:0;}
html,body{height:100%;}
body{background:#fff;}
#wrap{min-height:100%;_height:100%;min-width:320px;overflow:hidden;}
#imgs{
	background: #eee;
position:relative;
width:100%;
height:640px;
margin:0 auto;overflow:hidden;border-radius:15px;top:50px;z-index:1;}
#imgs.visible{overflow:visible;}
#imgs div{overflow:hidden;}
#tssel{position:absolute;top:650px;left:50%;z-index:10;width:160px;margin-left:-80px;}
#navs{z-index:10;position:absolute;left:50%;top:225px;margin-left:180px;width:4px;}
#navs a{overflow:hidden;display:block;width:2px;height:20px;border:1px solid #fff;margin:0 0 4px;transition:background 600ms ease;}
#navs .active{background:#fff;}
@media (max-width:540px) {
body{overflow:hidden;}
#navs{left:auto;right:10px;top:50%;margin-top:-117px;}
#imgs{position:absolute;top:0;width:100%;height:100%;margin:0;border-radius:0;}
#imgs img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
#tssel{top:auto;bottom:10px;}
}


.page0 img {
	width: 100px !important;
}
.page0 .img-wrap {
	height: 200px;
}
.page0 .text {

}

.page1 .img-wrap {
	height: 140px;
}

.page1 img {
	transform: rotate(30deg);
	width: 100px !important;
}

.page1 .text02 {
	margin-top: 100px;
	text-align: right;
}

</style>
</head>
<body>
<div id="wrap">
    <div id="imgs">
		<div class="page0">
			<center>
				<h1>2015</h1>
				<p class="img-wrap">
					<img src="http://2.s.bama555.com/2/201508/18/3ea2b57ff23c7e560a20e49fb49bb6de.png" alt="">
				</p>
				<p class="text">
					<ul>
						<li>1111111111111</li>
						<li>2222222222222</li>
						<li>3333333333334</li>
					</ul>
				</p>
			</center>
		</div>
		<div class="page1">
			<h1>2015</h1>
			<p class="img-wrap">
				<img src="http://2.s.bama555.com/2/201508/18/3ea2b57ff23c7e560a20e49fb49bb6de.png" alt="">
			</p>
			<p class="text01">
				<ul>
					<li>1111111111111</li>
					<li>2222222222222</li>
				</ul>
			</p>
			<p class="text02">
				blahblahb
			</p>
		</div>
    </div>
<script type="text/javascript" src="src/zepto.min.js"></script>
<script type="text/javascript" src="src/velocity.js"></script>
<script type="text/javascript" src="src/pageSwitch.js"></script>
<script>
var reg=location.search.match(/ts=([^&]*)/),
	ts=reg&&reg[1]||'scroll',
	a=new pageSwitch('imgs',{
	duration:1000,
	start:0,
	direction:1,
	loop:true,
	ease:/flip(?!Paper)/.test(ts)?'bounce':'ease',
	transition:ts,
	mouse:true,
	mousewheel:true,
	arrowkey:true
});

var changes = {};
changes["page0"] = function() {
	$(".page0").find("img").velocity({scale: 1.5});
	$(".page0").find("ul").velocity({ "padding-left": 150 }, 800, "easeOutQuad");
};

changes["page1"] = function() {
	$(".page1").find("img").velocity({"padding-left": 100}, 1000);
	$(".page1").find("ul").velocity({"padding-left": 150 }, 800, "easeOutQuad");
	$(".page1").find(".text02").velocity({"padding-right": 150 }, 800, "easeOutQuad");
};

var resets = [];
resets["page0"] = function() {
	$(".page0").find("img").velocity("stop");
	$(".page0").find("ul").velocity("stop");
	$(".page0").find("img").velocity({scale: 1});
	$(".page0").find("ul").velocity({ "padding-left": 0 }, 0);
};

resets["page1"] = function() {
	$(".page1").find("img").velocity("stop");
	$(".page1").find("ul").velocity("stop");
	$(".page1").find("img").velocity({scale: 1});
	$(".page1").find("ul").velocity({ "padding-left": 0 }, 0);
	$(".page1").find(".text02").velocity({"padding-right": 0 }, 800, "easeOutQuad");
};

a.on('after',function(m,n) {
	var crtPageNum = n;
	console.dir("page" + n);

	// 重置上一个 page
	resets["page" + n]();

	// 执行当前页面效果
	changes["page" + m]();
});

changes["page0"]();

</script>
</body>
</html>
